<template>
  <div class="tester">
    <blue-tooth v-if="isShowBlueTooth" @connect="blueToothConnect" />
    <TCPConnect v-if="isTcpConnect && isInfrared" @confirm="handleTCPConnect" />

    <div v-if="!isShowBlueTooth">
      <img :src="background" class="tester__bg" />
      <div class="tester__info">
        <TesterInfo />
        <DeviceInfo />
        <Result v-show="isShowResult" />
        <HistoryTable v-show="isShowHistory" />
      </div>
      <div class="tester__cards">
        <template v-if="!isInfrared">
          <StartTest @on-click="handleStartTest"/>
          <StopTest @on-click="handleStopTest" />
          <SaveData />
          <HistoryButton @on-click="handleHistoryClick" />
          <DeviceHistory v-if="isShowDeviceHistory" @on-click="handleDeviceHistory" />
        </template>
        <template v-if="isInfrared">
          <!-- <WriteContent /> -->
          <Reconnect />
          <RequestData />
          <SaveData />
          <HistoryButton @on-click="handleHistoryClick" />
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import ConnectDevice from '@/business/connect-device';
import Result from '@/business/result';
import background from '@/assets/背景.svg';
import Alert from '@/components/alert';
import eventBus, { eventNames } from '@/utils/event-bus';
import { disconnect, stopNotify, startNotification, handleResHex, writeRequestCode, writeHistoryCode } from '@/modules/bluetooth';
import TesterInfo from '@/business/tester-info';
import DeviceInfo from '@/business/device-info';
import BlueTooth from '@/business/blue-tooth';
import { buffer2Hex, isDevelopment } from '@/utils';
import HistoryTable from '@/business/history-table';
import { infrared, lightning, mechanical } from '@/modules/const';
import TCPConnect from '@/business/tcp-connect';
import { RequestData, WriteContent, Reconnect } from '@/business/infrared';
import HistoryButton from '@/business/history-button';
import SaveData from '@/business/save-data';
import { closeTCPConnect } from '@/modules/socket';
import StartTest from '@/business/start-test';
import StopTest from '@/business/stop-test';
import DeviceHistory from '@/business/device-history';
import { storage } from '@/modules/storage';

@Component({
  name: 'Tester',
  components: {
    ConnectDevice,
    Result,
    Alert,
    TesterInfo,
    DeviceInfo,
    BlueTooth,
    HistoryTable,
    TCPConnect,
    WriteContent,
    Reconnect,
    RequestData,
    HistoryButton,
    SaveData,
    StartTest,
    StopTest,
    DeviceHistory,
  }
})
export default class Tester extends Vue {
  private background = background;
  // 展示已经连接
  private isShowBlueTooth = false;
  // 展示TCP连接
  private isTcpConnect = false;

  // 当前测试仪
  private get tester() {
    return this.$store.state.tester;
  }

  private get isInfrared() {
    return this.tester === infrared;
  }

  private get isShowDeviceHistory() {
    return false;
    // return [mechanical].includes(this.tester);
  }

  private isShowHistory = false;
  private isShowResult = true;

  mounted() {
    if (!this.isInfrared) {
      this.isShowBlueTooth = true;
    }
    if (isDevelopment()) {
      this.isShowBlueTooth = false;
      eventBus.$emit(eventNames.handShake, '01');
    }
    storage.remove('dc-value');

    eventBus.$on(eventNames.openSocketConnect, () => {
      this.isTcpConnect = true;
    })
  }

  handleHistoryClick() {
    this.isShowResult = false;
    this.isShowHistory = true;
    eventBus.$emit(eventNames.showHistory);
  }

  handleStartTest() {
    this.isShowResult = true;
    this.isShowHistory = false;
    eventBus.$emit(eventNames.startTest);
  }

  handleStopTest() {
    this.isShowResult = true;
    this.isShowHistory = false;
    eventBus.$emit(eventNames.stopTest);
  }

  handleDeviceHistory() {
    this.isShowResult = true;
    this.isShowHistory = false;
    eventBus.$emit(eventNames.receiveHistoryData);
  }

  blueToothConnect() {
    console.log('蓝牙连接');
    startNotification((res) => {
      const hex = buffer2Hex(new Uint8Array(res));
      console.log('收到指令', hex);
      handleResHex(hex);
    })
    // 避雷器总是忙碌，跳过握手请求
    if ([lightning].includes(this.tester)) {
      eventBus.$emit(eventNames.handShake, '01');
    } else {
      writeRequestCode();
    }
    this.isShowBlueTooth = false;
  }

  handleTCPConnect() {
    this.$toast('TCP服务连接成功');
    this.isTcpConnect = false;
  }

  destroyed() {
    console.log('tester destroyed');
    this.$store.dispatch('setEquipment', {});
    this.$store.dispatch('setTester', '');
    this.$store.dispatch('setResult', []);
    this.$store.dispatch('setHistory', [])
    stopNotify().then(() => {
      disconnect();
    })
    closeTCPConnect();
    eventBus.$off(eventNames.openSocketConnect);
  }

};
</script>

<style lang="scss" scoped>
.tester {
  height: 100%;

  &__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &__info {
    width: 100%;
    position: relative;
  }

  &__cards {
    display: flex;
    justify-content: space-evenly;
    padding: 8px;
    position: fixed;
    width: 100%;
    bottom: 0px;
    background-color: #fff;
  }
}
</style>
